<template>
  <li>
    <h3>姓名:{{ p.name }}</h3>
    <p>
      爱好:
      <span v-for="item in p.hobby" :key="item"> {{ item }} </span>
    </p>
  </li>
</template>

<script>
export default {
  name: 'Item',
  props: ['p', 'count'],
  mounted() {
    console.log(this, 'item');
    console.log(this.p, 'item');

    // 切记，props是只读属性，不允许被修改
    // this.p = {};
    // this.count++;

    // 但是也会有人钻空子，如果一个数据是对象类型，我们不替换对象，而是修改了对象内部的属性
    // 其实也算是修改了props，但是vue不会报错，因为地址没变，他没有监听到props被修改
    // 我们不推荐使用这种做法
    this.p.name += '~~';
  },
};
</script>

<style></style>
